.friend_link {
    .link_item {
        display: block;
        padding: 10px 30px 10px 64px;
        height: 64px;
        background: #fafafa;
        border-radius: 4px;
        overflow: hidden;
        margin-bottom: 5px;
        position: relative;
        cursor: pointer;
        &:hover {
            .name {
                color: $_blog-primary;
            }
        }
        img {
            display: block;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            position: absolute;
            left: 15px;
            top: 10px;
        }
        p {
            font-size: 12px;
            color: #888;
            line-height: 20px;
            overflow: hidden;
            height: 20px;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
        .name {
            font-weight: bold;
            color: $_blog-text-title;
            font-size: 13px;
        }

        .more {
            position: absolute;
            right: 0;
            top: 0;
            padding-right: 15px;
            height: 64px;
            line-height: 64px;
            width: 64px;
            text-align: right;
            background: linear-gradient(
                90deg,
                rgba(250, 250, 250, 0.4) 0%,
                rgba(250, 250, 250, 0.8) 20%,
                rgba(250, 250, 250, 1) 40%,
                rgba(250, 250, 250, 1) 100%
            );
            .right-circle {
                font-size: 24px;
                color: $_blog-text-body;
                vertical-align: middle;
            }
        }
    }
}
